<template>
  <div class="test-container">
    <h1>心理测评题目API测试</h1>
    
    <div class="test-card">
      <h2>测试 findPage 方法</h2>
      <el-button type="primary" @click="testFindPage">测试查询</el-button>
      <el-button type="warning" @click="testFindPageWithParams">带参数测试</el-button>
      <el-button type="danger" @click="testFindPageWithoutParams">无参数测试</el-button>
      
      <div v-if="loading" class="loading">
        <el-loading></el-loading>
        正在加载...
      </div>
      
      <div v-if="error" class="error-message">
        <h3>错误信息：</h3>
        <pre>{{ error }}</pre>
      </div>
      
      <div v-if="result" class="result">
        <h3>API返回结果：</h3>
        <pre>{{ JSON.stringify(result, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
// 直接导入API模块
import api from '@/http/api';

export default {
  name: 'TestPsyQuestion',
  data() {
    return {
      loading: false,
      error: null,
      result: null
    }
  },
  methods: {
    async testFindPage() {
      this.loading = true;
      this.error = null;
      this.result = null;
      
      try {
        // 参数对象 - 修改为标准PageRequest格式
        const params = {
          pageNum: 1,
          pageSize: 10,
          params: [] // 空数组而不是null或undefined
        };
        
        console.log('调用 findPage，参数：', params);
        const response = await api.psyQuestion.findPage(params);
        console.log('API返回：', response);
        
        this.result = response.data;
      } catch (error) {
        console.error('API调用出错：', error);
        this.error = error.message || '未知错误';
        
        // 添加请求详情
        if (error.response) {
          this.error += '\n状态码: ' + error.response.status;
          this.error += '\n响应内容: ' + JSON.stringify(error.response.data);
        } else if (error.request) {
          this.error += '\n请求已发送但未收到响应';
        }
      } finally {
        this.loading = false;
      }
    },
    
    async testFindPageWithParams() {
      this.loading = true;
      this.error = null;
      this.result = null;
      
      try {
        // 带有更多参数的对象 - 确保params数组中的对象格式正确
        const params = {
          pageNum: 1,
          pageSize: 10,
          params: [
            { name: 'question', value: '%测试%' },
            { name: 'termId', value: 1 } // 将termId作为params参数
          ]
        };
        
        console.log('调用 findPage（带参数），参数：', params);
        const response = await api.psyQuestion.findPage(params);
        console.log('API返回：', response);
        
        this.result = response.data;
      } catch (error) {
        console.error('API调用出错：', error);
        this.error = error.message || '未知错误';
        
        // 添加请求详情
        if (error.response) {
          this.error += '\n状态码: ' + error.response.status;
          this.error += '\n响应内容: ' + JSON.stringify(error.response.data);
        } else if (error.request) {
          this.error += '\n请求已发送但未收到响应';
        }
      } finally {
        this.loading = false;
      }
    },
    
    async testFindPageWithoutParams() {
      this.loading = true;
      this.error = null;
      this.result = null;
      
      try {
        // 直接使用null参数测试
        console.log('调用 findPage（无参数）');
        const response = await api.psyQuestion.findPage(null);
        console.log('API返回：', response);
        
        this.result = response.data;
      } catch (error) {
        console.error('API调用出错：', error);
        this.error = error.message || '未知错误';
        
        // 添加请求详情
        if (error.response) {
          this.error += '\n状态码: ' + error.response.status;
          this.error += '\n响应内容: ' + JSON.stringify(error.response.data);
        } else if (error.request) {
          this.error += '\n请求已发送但未收到响应';
        }
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
}

.test-card {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.error-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #fef0f0;
  border-radius: 4px;
}

.result {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f9eb;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.loading {
  margin: 15px 0;
  text-align: center;
  color: #909399;
}
</style> 